<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="500px">
			<el-form ref="formRef" :model="state.ruleForm" :rules="state.rules">
				<el-row class="mb20" :gutter="20">
					<el-col :span="24">
						<el-form-item label="用户名称" prop="nickname">
							<el-input v-model="state.ruleForm.nickname" placeholder="请输入用户名称" clearable />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row class="mb20" :gutter="20">
					<el-col :span="24">
						<el-form-item label="登录账号" prop="username">
							<el-input
								v-model="state.ruleForm.username"
								placeholder="请输入账号"
								clearable
								@input="onVerifyCnAndSpaceUsername"
								:disabled="state.dialog.type === 'add' ? false : true"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="登录密码" :prop="state.dialog.type === 'edit' ? '' : 'password'">
					<el-input
						v-model="state.ruleForm.password"
						:type="state.isShowPassword ? 'text' : 'password'"
						placeholder="请输入登录密码"
						clearable
						@input="onVerifyCnAndSpacePassword"
						autocomplete="new-password"
					>
						<template #suffix>
							<i
								class="iconfont el-input__icon login-content-password"
								:class="state.isShowPassword ? 'icon-xianshimima' : 'icon-yincangmima'"
								@click="state.isShowPassword = !state.isShowPassword"
							>
							</i>
						</template>
					</el-input>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="state.dialog.submitLoading" size="default">提 交</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { nextTick, reactive, ref } from 'vue';
import { adminApi } from '/@/api';
import { verifyCnAndSpace } from '/@/utils/toolsValidate';

let callback: Function = () => {};
const AdminApi = adminApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	ruleForm: {
		admin_id: '',
		nickname: '',
		username: '',
		password: '',
		status: 1,
	},
	rules: {
		nickname: [{ required: true, message: '用户名称不能为空', trigger: ['blur'] }],
		username: [{ required: true, message: '登录账号不能为空', trigger: ['blur'] }],
		password: [{ required: true, message: '登录密码不能为空', trigger: ['blur'] }],
	},
	isShowPassword: false,
});
const formRef = ref();

/********** 触发事件 **********/
// 登陆账户过滤
const onVerifyCnAndSpaceUsername = (val: string) => {
	state.ruleForm.username = verifyCnAndSpace(val);
};
// 登陆密码过滤
const onVerifyCnAndSpacePassword = (val: string) => {
	state.ruleForm.password = verifyCnAndSpace(val);
};
// 取消
const onCancel = () => {
	state.dialog = {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	};
};
// 提交
const onSubmit = () => {
	formRef.value.validate((valid: boolean) => {
		if (!valid) return;
		state.dialog.submitLoading = true;
		if (state.dialog.type === 'add') {
			_adminAdd(state.ruleForm);
		} else {
			_adminEdit(state.ruleForm);
		}
	});
};

/********** 方法事件 **********/
// 打开
const openDialog = (data: any, row: any, fn: Function) => {
	state.dialog = {
		isShowDialog: true,
		type: data.type,
		title: data.title,
		submitLoading: false,
	};
	callback = fn;
	nextTick(() => {
		formRef.value.resetFields();
		if (state.dialog.type !== 'add') {
			_adminInfo({ admin_id: row.id });
		}
	});
};

/********** 网络请求 **********/
// 获取管理员信息
const _adminInfo = (params: Object) => {
	AdminApi.adminInfo(params)
		.then((res) => {
			state.ruleForm = {
				...res.data.info,
				admin_id: res.data.info.id,
				password: '',
			};
		})
		.catch(() => {});
};
// 添加管理员
const _adminAdd = (params: Object) => {
	AdminApi.adminAdd(params)
		.then(() => {
			ElMessage.success('操作成功！');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};
// 编辑管理员
const _adminEdit = (params: Object) => {
	AdminApi.adminEdit(params)
		.then(() => {
			ElMessage.success('操作成功！');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
